﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPages/Frontend.master" AutoEventWireup="true"
  CodeFile="PercentageCalculator.aspx.cs" Inherits="Projects_PercentageCalculator" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" runat="server" ContentPlaceHolderID="CPMainContent">
  <asp:PlaceHolder ID="ObjectivePanel" runat="server" Visible="True">
    <div class="post">
      <h2 class="title">
        Percentage Calculator</h2>
      <div class="entry">
        <p>
          The purpose of this application is to create a simple web application which will
          allow the user to calculate percentages.
        </p>
        <p>
          The application should not allow users to enter invalid numbers.
        </p>
        <p>
          The objective for the Developer is to practice working with variables and fuctions.
        </p>
        <p>
          This was the second small project I did and I built it before I decided to make a website of them.
          When porting this into the website I've realised that I'm not happy with the validation and I'd prefer to implement
          some client side validation.
        </p>
        <p>
          I may revisit it at a later date. If you have any suggestions or an alternative suggestion regarding the validation please <a href="~/About/Contact.aspx" runat="server">contact me</a>.
        </p>
      </div>
      <div class="byline">
        <p class="meta">
          <asp:Button ID="BtnShowSolution" runat="server" Text="Show Possible Solution" OnClick="BtnShowSolution_Click" />
        </p>
      </div>
    </div>
  </asp:PlaceHolder>
  <asp:PlaceHolder ID="SolutionPanel" runat="server" Visible="False">
    <div class="post">
      <h2 class="title">
        Solution</h2>
      <div class="entry">
        <table id="PercentageCalculatorTable">
      <tr class="TableHeading">
        <td>
          <asp:Label ID="LblHeaderQuestion" runat="server" Text="Question"></asp:Label>
        </td>
        <td>
          &nbsp;</td>
        <td>
          <asp:Label ID="LblHeaderAnswer" runat="server" Text="Answer"></asp:Label>
        </td>
      </tr>
      <tr>
        <td>
          What is
          <asp:TextBox ID="Q1Input1" runat="server" CssClass="NumberTextbox"></asp:TextBox>
          % of
          <asp:TextBox ID="Q1Input2" runat="server" CssClass="NumberTextbox"></asp:TextBox>
          ?
        </td>
        <td>
          <asp:Button ID="BtnCalculateQ1" runat="server" onclick="BtnCalculateQ1_Click" 
            Text="Calculate" />
        </td>
        <td align="center">
          <asp:Label ID="LblAnswerQ1" runat="server"></asp:Label>
        </td>
      </tr>
      <tr>
        <td>
          <asp:TextBox ID="Q2Input1" runat="server" CssClass="NumberTextbox"></asp:TextBox>
          &nbsp;is what percent of
          <asp:TextBox ID="Q2Input2" runat="server" CssClass="NumberTextbox"></asp:TextBox>
          ?</td>
        <td>
          <asp:Button ID="BtnCalculateQ2" runat="server" onclick="BtnCalculateQ2_Click" 
            Text="Calculate" />
        </td>
        <td align="center">
          <asp:Label ID="LblAnswerQ2" runat="server"></asp:Label>
          </td>
      </tr>
      <tr>
        <td>
          <asp:TextBox ID="Q3Input1" runat="server" CssClass="NumberTextbox"></asp:TextBox>
          &nbsp;is
          <asp:TextBox ID="Q3Input2" runat="server" CssClass="NumberTextbox"></asp:TextBox>
          % of what?</td>
        <td>
          <asp:Button ID="BtnCalculateQ3" runat="server" onclick="BtnCalculateQ3_Click" 
            Text="Calculate" />
        </td>
        <td align="center">
          <asp:Label ID="LblAnswerQ3" runat="server"></asp:Label>
        </td>
      </tr>
    </table>
      </div>
      <div class="byline">
        <p class="meta">
          <asp:Button ID="BtnShowObjective" runat="server" Text="Hide Solution / Show Objective"
            OnClick="BtnShowObjective_Click" />
        </p>
      </div>
    </div>
  </asp:PlaceHolder>
  <div style="clear: both;">
    &nbsp;</div>
</asp:Content>
